<template>
	<div class="updateImg">
		<img :src="`${$ip}/api/public/showimg/${img}`" min-width="70" height="70" />
		<el-upload class="avatar-uploader" :multipe="false" :show-file-list="true" :auto-upload="false"
			:before-upload="beforeAvatarUpload" :file-list="fileList" :on-change="handleChange" action="uploadAction"
			list-type="picture" accept="image/jpg,image/jpeg">
			<h4>选择头像图片</h4>
		</el-upload>
		<el-button @click="update()">确认</el-button>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				img: '',
				fileList: []

			}
		},
		methods: {
			handleChange: function(file, fileList) {
				this.fileList = fileList;
			},

			beforeAvatarUpload(file) {
				const isJPG = file.type === 'image/jpeg';
				const isLt2M = file.size / 1024 / 512;

				if (!isJPG) {
					this.$message.error('上传图片只能是 JPG 格式!');
				}
				if (!isLt2M) {
					this.$message.error('上传图片大小不能超过 0.5MB!');
				}
				return isJPG && isLt2M;
			},
			update() {
				let formData = new FormData();
				formData.append("mypic", this.fileList[0].raw);
				this.$postf('/api/user/updatePic', formData).then((resp) => {
					console.log(resp.data.msg);
					console.log(resp.data.data);

					this.img = resp.data.data;
					window.localStorage.removeItem('img');
					window.localStorage.setItem('img', this.img);
				})
			}
		},
		mounted() {
			this.img = window.localStorage.getItem('pic');
		}
	}
</script>

<style>
	.updateImg img {
		width: 300px;
		height: 300px;
	}



	.updateImg .el-upload-list--picture .el-upload-list__item {
		position: relative;
		left: 300px;
		top: -200px;
	}
</style>